<template>
  <div class="main-tradebox">
    <el-container class="main-container">
      <el-main>
        <div class="container cc_main">
          <!-- 标题栏 -->
          <div class="top_title flex">
            <h3 class="font-24 font-bold">广告权限申请</h3>
            <p class="font-12 pright">成为平台广告加V用户，获得广告发布权限，享受更多交易特权。</p>
          </div>
          <!-- 内容部分 -->
          <div class="sq_cont">
            <el-row type="flex" class="row-bg" justify="space-between">
              <el-col :span="8">
                <div class="grid-content bg-purple tips">
                  <img src="../../assets/images/trade/sq1.png" alt="" srcset="">
                  <h3>广告发布</h3>
                  <p>加V用户自由发布广告，买卖更灵活、更便捷。</p>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content bg-purple tips">
                  <img src="../../assets/images/trade/sq2.png" alt="" srcset="">
                  <h3>专属标识</h3>
                  <p>用户名称专属加V标识，增强交易方信任。</p>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content bg-purple tips">
                  <img src="../../assets/images/trade/sq3.png" alt="" srcset="">
                  <h3>一对一服务</h3>
                  <p>我们面向加V用户提供一对一专属服务，提高交易效率。</p>
                </div>
              </el-col>
            </el-row>
          </div>
          <!-- btn -->
          <div class="btnbox">
            <el-checkbox v-model="checked">我已阅读并同意 <em>《广告发布方协议》</em></el-checkbox>
            <el-button type="primary" :disabled="!checked" @click="navigateTo('/FrTrade/applyform')">立即申请</el-button>
          </div>
        </div>
        
        
      </el-main>
    </el-container>
    <!-- 购买弹窗 -->

  </div>
</template>

<script>
import { checkTradePassword } from "../../service/TradeService.js";
export default {
  data() {
    return {
      checked: false,
    }
  },        
  computed: {
    
  },
  watch: {
    
  },
  mounted() {
    
  },
  methods: {

  }
};
</script>
<style lang="scss" scoped>
.break-line {
  @include breakLine;
}
$mr: 11px;
$border: 1px solid #e5e5e5;
.row {
  @include textVcenter();
  span {
    display: block;
    box-sizing: border-box;
  }
  .span-lf {
    flex: 4;
    padding-right: 15px;
    text-align: right;
  }

  .span-rt {
    flex: 5;
    padding-left: 15px;
  }
}
.container {
  min-height: calc(100% - 294px);
  padding: 30px 0;
  width: 77%;
  margin: 0 auto;
  .el-main {
    padding-top: 0;
  }
}
.el-container {
  .form-wrap {
    width: 48.65%;
    .break-line {
      margin-top: 12px;
    }
    .total {
      margin-top: 19px;
    }
    button {
      margin-top: 22px;
    }
    .account {
      margin-top: 14px;
      a {
        color: $color-danger;
      }
    }
    .input-group {
      margin-top: 19px;
      .unit {
        line-height: 40px;
        color: #333;
        padding-right: 6px;
      }
      .el-input {
        margin-top: 10px;
      }
      .hint {
        display: inline-block;
        margin-top: $mr;
      }
    }
  }
  //0a4bc1
  .warning-box {
    border: $default-border;
    padding: 20px;
    margin-top: 20px;
    h3 {
      line-height: 2;
    }
    span {
      line-height: 1.5;
    }
  }
}
.panel-container {
  .panel-header {
    margin: 30px 0 12px 0;
  }
}
.top_title{
  color: $w-txtcor;padding:30px 0;
  h3{font-size: 24px;}
  p{font-size: 13px;color: #9aa5b5;}
  .pright{line-height: 24px;margin-left: 12px;}
}
.main-container{min-height: 80vh;}
// 内容部分
.sq_cont{
  margin-top: 30px;
  .tips{
    box-shadow: 0 0 20px 0 rgba(28,36,44,.12);
    padding: 10px 28px;
    height: 344px;
    width: 275px;
    img{display: block;margin: 50px auto;}
    h3{
      margin-top: 28px;
      margin-bottom: 20px;
      font-weight: 400;
      font-size: 18px;
      text-align: center;
      color: #1c242c;
    }
    p{
      line-height: 1.6;
      width: 186px;
      text-align: center;
      margin: 0 auto;
      color: #9aa5b5;
    }
  }
}
.btnbox{
  width: 400px;
  margin: 100px auto 0 auto;
  p{text-align: center;}
  button{margin-top: 30px;display: block;margin: 20px auto 0 auto;width: 200px;}
  .el-checkbox {margin: 0 auto;}
  em{color: #357ce1;}
}
</style>
